<template>
  <uni-popup ref="popup" type="bottom" class="popup" >
    <view class="popup-content">
      <view class="picker-header">
        <view @click="onClose">取消</view>
        <view v-if="title" class="packer-title">{{ title }}</view>
        <view @click="onConfirm">确定</view>
      </view>
      <picker-view :value="value" @change="onChange" class="picker">
        <picker-view-column>
          <view class="picker-row" v-for="item in options" :key="item.value">
            {{ item.name }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script>
import { getRecentClass } from '@/api/duty-basic/duty-meeting'

export default {
  props: {
    title: String
  },
  data() {
    return {
      options: [],
      value: [0],
    }
  },
  methods: {
    // 打开
    open() {
      this.$refs.popup.open()
    },
    //确定
    onConfirm() {
      let selectData = {}
      if (Array.isArray(this.value) && this.value.length) {
        selectData = {
          value: this.options[this.value[0]]?.value,
          name: this.options[this.value[0]]?.name,
          teamDate: this.options[this.value[0]]?.teamDate
        }
      }

      this.$emit('confirm', selectData)
      this.onClose()
    },
    // 取消
    onClose() {
      this.$refs.popup.close()
    },
    //滑动picker
    onChange(e) {
      this.value = e.detail.value
    },
    async query({ meetingTime, itemId }) {
      const params = {
        teamDateTime: meetingTime.replace(/\//g, '-') + ':00',
        itemId,
      }
      const { data } = await getRecentClass(params)
      this.options = data.map(item => ({ name: item.textLabel, value: item.classId, teamDate: item.teamDate }))
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .bottom {
  margin-bottom: 0 !important;
}

.popup-content {
  background: #fff;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.picker {
  height: 490rpx;
}

.picker-row {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
}
</style>
